<template>
  <div class="">
    <el-card>
      <el-table :data="roleListData" width="100%">
        <el-table-column
          :lable="$t('msg.role.index')"
          type="index"
          width="120"
        ></el-table-column>
        <el-table-column
          :lable="$t('msg.role.name')"
          prop="title"
        ></el-table-column>
        <el-table-column
          :lable="$t('msg.role.desc')"
          prop="describe"
        ></el-table-column>
        <el-table-column
          :lable="$t('msg.role.action')"
          prop="action"
          width="260"
        >
          <template #default="{ row }">
            <el-button
              template="{row}"
              type="primary"
              size="mini"
              @click="onClickDistributePermission(row)"
              v-permission="['distributePermission']"
              >{{ $t('msg.role.assignPermissions') }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <DistributePermission
      v-model="distributePermissionVisible"
      :roleId="selectedRoleId"
    ></DistributePermission>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { roleList } from '@/api/role'
import DistributePermission from './components/DistributePermission.vue'
const roleListData = ref([])

const getRoleList = async () => {
  const res = await roleList()
  roleListData.value = res.data.data
}

onMounted(() => {
  getRoleList()
})

const distributePermissionVisible = ref(false)
const selectedRoleId = ref('')
const onClickDistributePermission = (row) => {
  distributePermissionVisible.value = true
  selectedRoleId.value = row.id
}
</script>

<style lang="scss" scoped></style>
